<script setup>
import { ESCarousel, ESContent } from "earthsdk-ui";
const list = ['1', '2', '3', '4', '5', '6']
</script>

<template>
  <div style="width: 100%; height: 500px" class="display">
    <ESCarousel :width="500" :height="250" primary-color="red">
      <ESContent v-for="item in list" :key="item">
        <div
          style="width: 100%; height: 100%; background: grey"
          class="display"
        >
          {{ item }}
        </div>
      </ESContent>
    </ESCarousel>
  </div>
</template>

<style scoped>
.display {
    display: flex;
    justify-content: center;
    align-items: center;
}
</style>
